<template>
	<view class="">
		<u-sticky bgColor="#fff"><u-tabs :list="navList" @click="changeNav" :scrollable="false" lineColor="#5ac725" :activeStyle="{ color: '#5ac725' }"></u-tabs></u-sticky>
		<mescroll-body ref="mescrollRef" :up="upOption" @init="mescrollInit" @down="downCallback" @up="upCallback"><orderList :dataList="dataList" /></mescroll-body>
	</view>
</template>

<script>
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
import orderList from './components/orderList.vue';
export default {
	mixins: [MescrollMixin], // 使用mixin
	data() {
		return {
			navList: [
				{
					name: '全部订单',
					id: null
				},
				{
					name: '正在进行中',
					id: 1
				},
				{
					name: '已完成',
					id: 2
				}
			],
			dataList: [], // 订单列表篇
			searchInfo: {}, // 搜索信息
			// 分页配置
			upOption: {
				textNoMore: '没有更多了',
				noMoreSize: 1,
				empty: {
					icon: require('@/static/image/empty/icon-baobiao.png'),
					tip: '暂无订单信息',
					fixed: true,
					top: '300rpx'
				},
				toTop: {
					safearea: true
				}
			}
		};
	},
	components: { orderList },
	methods: {
		// 选择导航
		changeNav(item) {
			this.searchInfo.status = item.id;
			this.mescroll.resetUpScroll();
		},
		// 获取订单列表
		async upCallback(page) {
			this.searchInfo.page = page.num; // 页码, 默认从1开始
			this.searchInfo.limit = page.size; // 页长, 默认每页10条
			const res = await this.$api.order.list(this.searchInfo);
			const curPageData = res.data.list ? res.data.list : [];
			let curPageLen = curPageData.length;

			//设置列表数据
			if (page.num == 1) this.dataList = []; //如果是第一页需手动置空列表
			this.dataList.push(...curPageData); //追加新数据
			//后台接口有返回列表的总页数 totalPage
			this.mescroll.endBySize(curPageLen, res.data.countNum);
		}
	}
};
</script>
